<template>
  <div class="ele-body">
    <!-- 搜索表单 -->
    <div class="block-interval">
      <a-card :bordered="false">
        <a-form layout="inline" :model="where">
          <a-row>

            <a-form-item label="开始时间:">
              <a-date-picker
                v-model:value="where.beginTime"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
              />
            </a-form-item>
            <a-form-item label="结束时间:">
              <a-date-picker
                v-model:value="where.endTime"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
              />
            </a-form-item>

            <a-form-item label="消息ID:">
              <a-input v-model:value.trim="where.taskNo" placeholder="请输入消息ID" allow-clear />
            </a-form-item>

            <a-form-item class="ele-text-center">
              <a-space>
                <a-button type="primary" @click="reload">查询</a-button>
                <a-button @click="reset">重置</a-button>
              </a-space>
            </a-form-item>
          </a-row>
        </a-form>
      </a-card>
    </div>

    <!-- 表格 -->
    <div>
      <a-card :bordered="false" class="table-height">
        <BasicTable
          :canResize="false"
          ref="tableRef"
          :api="MsgPushApi.findPage"
          :where="where"
          :columns="columns"
          showTableSetting
          rowKey="id"
          :rowSelection="{
            type: 'checkbox',
            selectedRowKeys: checkedKeys,
          }"
        >
          <!-- table上边工具栏 -->
          <template #toolbar>
            <div class="table-toolbar">
              <a-space>
                <a-button type="primary" @click="openEdit()">
                  <template #icon>
                    <plus-outlined />
                  </template>
                  <span>新建</span>
                </a-button>
              </a-space>
            </div>
          </template>

          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex == 'title'">
              <a @click="openEdit(record)">{{ record.title }}</a>
            </template>
            <template v-if="column.dataIndex === 'status'">
              <a-switch
                v-if="record.status === '0'"
                :checked-children="getCheckedChildren(record.status)"
                un-checked-children="待启动"
                default-checked
                :checked="record.status === '1'"
                @change="(checked) => editStatus(checked, record)"
                class="ant-switch-inner"
              />
              <div v-else-if="record.status === '1'">执行完成</div>
              <div v-else-if="record.status === '2'">启动中</div>
              <div v-else>启动异常</div>
            </template>

            <!-- table操作栏按钮 -->
            <template v-if="column.key === 'action'">
              <a-space>
                <a @click="openEdit(record)" v-if="record.status === '0'">修改</a>
                
                <a-divider type="vertical" />

                <a-popconfirm
                  title="确定要删除此任务吗？"
                  @confirm="remove(record)"
                  v-if="record.status === '0'"
                >
                  <a class="guns-text-danger">删除</a>
                </a-popconfirm>

                <a-divider type="vertical" />

                <a @click="openMsg(record)">执行日志</a>

              </a-space>
            </template>
          </template>
        </BasicTable>
      </a-card>
    </div>

    <!-- 编辑弹窗 -->
    <msgPush-edit
      v-model:visible="showEdit"
      :data="current"
      @done="reload"
      v-if="showEdit"
      :isEdit="isEdit"
    />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { BasicTable } from '/@/components/Table';
import { MsgPushApi } from '/@/api/touch/msgPush/MsgPushApi';
import MsgPushEdit from './msgPush-edit.vue';
import { message } from 'ant-design-vue';
// 查询条件
const where = reactive({
  beginTime: '',
  endTime: '',
  title: '',
});

// 多选选中列表
const checkedKeys = ref<Array<string | number>>([]);

// 当前行数据
const current = ref<any>(null);

// 是否显示新增编辑弹框
const showEdit = ref<boolean>(false);
const isEdit = ref<boolean>(false);

// 表格配置
const columns = ref<string[]>([
  {
    title: '消息ID',
    dataIndex: 'taskNo',
  },{
    title: '主题',
    dataIndex: 'title',
  },
  {
    title: '子主题',
    dataIndex: 'subTitle',
  },
  {
    title: '主体内容',
    dataIndex: 'body',
  },
  {
    title: '状态',
    dataIndex: 'status',
    customRender: function ({ text }) {
      if ('0' === text) {
        return '待启动';
      } else if ('1' === text) {
        return '完成';
      } else if ('2' === text) {
        return '执行中';
      } else {
        return '执行异常';
      }
    },
  },
  {
    title: '发送时间',
    dataIndex: 'updateTime',
  },
  {
    title: '操作',
    key: 'action',
    width: 280,
    align: 'center',
  },
]);

// ref
const tableRef = ref(null);

/**
 * 点击查询
 * @author: nxy
 * @Date: 2022-10-12 09:38:18
 */
const reload = () => {
  checkedKeys.value = [];
  tableRef.value.reload({ page: 1 });
};

/**
 * 点击重置
 * @author: nxy
 * @Date: 2022-10-12 09:38:29
 */
const reset = () => {
  where.beginTime = '';
  where.endTime = '';
  where.title = '';
  reload();
};

/**
 * 删除单个
 *
 * @author chenjinlong
 * @date 2021/4/2 17:03
 */
const remove = async (row: any) => {
  const result = await MsgPushApi.delete({ id: row.id });
  message.success(result.message);
  reload();
};

/**
 * 打开编辑弹窗
 *
 * @author chenjinlong
 * @date 2021/4/2 17:03
 */
const openEdit = (row: any) => {
  current.value = row;
  showEdit.value = true;
  isEdit.value = false;
};
/**
 * 打开详情
 *
 * @author chenjinlong
 * @date 2021/4/2 17:03
 */
const openMsg = (row: any) => {
  current.value = row;
  showEdit.value = true;
  isEdit.value = true;
};

/**
 * 状态
 *
 */
const editStatus = async (checked: boolean, row: any) => {
  console.log('');
  const id = row.id;
  // 审批：1-通过，2-待审核
  const status = checked ? '1' : '0';
  let result = await MsgPushApi.updateStatus({ id, status });
  console.log(result);
  message.success(result.message);
  reload();
};
const getCheckedChildren = (status) => {
  if (status === 1) {
    return '启动中';
  } else if (status === 2) {
    return '启动报错';
  } else if (status === 3) {
    return '已启动';
  } else if (status === 4) {
    return '已启动';
  }
};
</script>
<style  scoped>
.class {
  color: red;
}
:deep(.ant-switch) {
  margin-left: 120px;
}
</style>
